<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script type="text/javascript" src="/static/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="/static/echarts.min.js"></script>
    <script type="text/javascript" src="/static/china.js"></script>
</head>
<body>
<div id="pie-2" style="color:#5ac8fa;width: 600px;height: 500px;border:1px solid #5ac8fa"></div>
<script>
$(document).ready(function () {
        var china_chart = echarts.init(document.getElementById('pie-2'));
        var data_bar=[]
        var name_bar=[]
        var sum_tmp=0;
        var tmp_s=[1,0.45,0.35,0.3,0.25,0.22,0.2,0.16,0.12,0.07];
        var y_data=[];
        var option = {
        title: [{
            show: true,
            text: '排名情况',
            textStyle: {
                color: '#2D3E53',
                fontSize: 18
            },
            x:'center',
            y: 10
        }],


        grid: {
            x: 'center',
            y: 25,
            bottom:10,
            width: '60%'
        },
        xAxis: {
            show: false
        },
        yAxis: [{
            type: 'category',
             position:'left',
            inverse: true,
            nameGap: 100,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                interval: 0,
                margin: 65,
                textStyle: {
                    color: '#455A74',
                    align: 'left',
                    fontSize: 14
                },
                rich: {
                    a: {
                        color: '#fff',
                        backgroundColor: '#FAAA39',
                        width: 20,
                        height: 20,
                        align: 'center',
                        borderRadius: 2
                    },
                    b: {
                        color: '#fff',
                        backgroundColor: '#4197FD',
                        width: 20,
                        height: 20,
                        align: 'center',
                        borderRadius: 2
                    }
                },
                formatter: function(params) {
                    if (parseInt(params.slice(0, 1)) < 3) {
                        return [
                            '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                        ].join('\n')
                    } else {
                        return [
                            '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                        ].join('\n')
                    }
                }
            },
            data:[]
        },{
            type: 'category',
             position:'right',
            inverse: true,
            nameGap: 100,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                interval: 0,
                margin: 0,
                textStyle: {
                    color: '#455A74',
                    align: 'left',
                    fontSize: 14
                },
            },
            data: []
        }],

        series: [ {
            name: 'barSer',
            type: 'bar',
            roam: false,
            visualMap: false,
            zlevel: 2,
            barMaxWidth: 10,
            barGap: 0,
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [{
                            colorStops: [{
                                offset: 0,
                                color: '#FFD119' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#FFAC4C' // 100% 处的颜色
                            }]

                        },
                            {
                                colorStops: [{
                                    offset: 0,
                                    color: '#00C0FA' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#2F95FA' // 100% 处的颜色
                                }]
                            }
                        ];
                        if (params.dataIndex < 3) {
                            return colorList[0]
                        } else {
                            return colorList[1]
                        }
                    },
                    barBorderRadius: 15
                }
            },
            data: []
        }]
    };
    china_chart.setOption(option);
    china_chart.showLoading();
        $.ajax({
            url:"/data_bar"
            ,async:true
            ,dataType:'JSON'
            ,timeout:10000
            ,contentType:"application/json"
            ,success:function (data) {

                for (var i=0;i<data.length;i++){
                    sum_tmp=sum_tmp+data[i].value;
                    name_bar.push(i+data[i].name);

                }
                for (var i=0;i<data.length;i++){
                    data_bar.push(sum_tmp*tmp_s[i]);
                    y_data.push(data[i].value)
                }
                   china_chart.hideLoading()
                   china_chart.setOption({
                       yAxis: [{data:name_bar},
                           {data:y_data}],
                       series: {
                           data:data_bar
                       }
                   })







        }
        })


    });
</script>
</body>
</html>